<template>
    <div class="tousu-fenxi">
        <MoodalTitle title="近期热点投诉分析(案件标点)"></MoodalTitle>
        <div class="fenxi-charts" ref="intelligent"></div>
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import { ZhiNengFenxiYanPan } from '@/api/zhangzi/index'

export default {
    components: { MoodalTitle },
    data() {
        return {
            value: '2023',
            Month: [], //月份
            sum: [], //数量
        }
    },
    mounted() {
        this.intelligentfData()
    },
    methods: {
        // 近期热点投诉分析
        intelligentfData() {
            ZhiNengFenxiYanPan.recentIssuesDB().then(res => {
                if (res.code == 200) {
                    console.log(res.data, 'ZhiNengFenxiYanPan')
                    let tousuData = []
                    res.data.forEach(item => {
                        tousuData.push({
                            value: item.sum,
                            name: item.issues
                        })
                    })
                    this.intelligentfication(tousuData)
                }
            })
        },
        intelligentfication(tousuData) {
            let charts = echarts.init(this.$refs.intelligent)
            let option = {
                color: ['#03acd1', '#04cab7', '#03c781', '#fce348', '#fc2d8a', '#0292fe'],
                title: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                    },
                    padding: 0,
                    top: 35,
                    left: 'center',
                },
                tooltip: {
                    show: true,
                    formatter: '{b}:{d}%',
                },
                series: [
                    {
                        type: 'pie',
                        center: ['50%', '50%'], //圆心的位置
                        top: '2%', //单单指的饼图距离上面的距离，top越大饼图越小
                        left: '0%', //单单指的饼图距离左面的距离，会改变饼图的大小
                        radius: ['20%', '80%'], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
                        avoidLabelOverlap: false, //做同心圆用到
                        clockwise: false, //顺时针排列
                        startAngle: 160, //起始角度 影响不大
                        roseType: "area", //area|radius

                        label: {
                            show: true, //false不显示饼图上的标签
                            position: 'outside', //inside（在饼图上显示）,outside(默认就会出现引导线) center
                            formatter: '{b}:{c}',
                        },


                        //只有设置了label:show=ture;position=outside 设置labelLine才会有效
                        labelLine: {
                            show: true, //显示引导线
                            length: 10, //连接饼图第1段线条的长度 length length2 不写自适应
                            length2: 10, //链接饼图第2段线条长度
                            smooth: true, //是否光滑连接线
                        },

                        itemStyle: {
                            //每个扇形的设置
                            borderColor: 'rgba(0,0,0,.1)', //扇形边框颜色
                            borderWidth: 0, //扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果

                        },
                        data: tousuData.sort((a, b) => b.value - a.value), //数组从大到小排序

                        emphasis: {
                            scale: true,
                            scaleSize: 10,
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            };


            charts.setOption(option)
        },

    }
}
</script>

<style lang="less" scoped>
.tousu-fenxi {
    position: relative;
    width: 50rem;
    height: 47.7rem !important;
}

.fenxi-charts {
    width: 45.6rem;
    height: 40rem;
}
</style>